<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      :title="!dataForm.id ? $t('add') : $t('update')"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="50%"
      top="70px"
    >
      <div class="dialogInner">
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmitHandle()"
          :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'"
          :disabled="disabled"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="商品套餐" prop="waresThali">
                <el-input
                  v-model="dataForm.waresThali"
                  placeholder="商品套餐"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="价格" prop="price">
                <el-input
                  v-model="dataForm.price"
                  placeholder="价格"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="营业时间" prop="businessHours">
                <el-input
                  v-model="dataForm.businessHours"
                  placeholder="营业时间"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经纬度" prop="lonandLat">
                <el-input
                  v-model="dataForm.lonandLat"
                  style="width: 60%; margin-right: 10px"
                ></el-input>
                <el-button type="primary" size="mini" @click="mapCli()"
                  >地图选点</el-button
                >
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="标签" prop="labelList">
                <el-tag
                  :key="tag"
                  v-for="tag in dataForm.labelList"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  >添加标签
                </el-button>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="工作室名称" prop="studioName">
                <el-input
                  v-model="dataForm.studioName"
                  placeholder="工作室名称"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="电话" prop="phone">
                <el-input
                  v-model="dataForm.phone"
                  placeholder="电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地址" prop="address">
                <el-input
                  v-model="dataForm.address"
                  placeholder="地址"
                ></el-input>
              </el-form-item>
            </el-col>

            <!--<el-col :span="12">-->
            <!--<el-form-item label="旅拍封面" prop="coverImage">-->
            <!--<el-upload class="avatar-uploader" :action="url" :show-file-list="false"-->
            <!--:on-success="(res, file, fileList)=>successHandle1(res, file, fileList)"-->
            <!--:before-upload="beforeUploadHandle">-->
            <!--<img v-if="dataForm.pic" :src="dataForm.pic" class="avatar">-->
            <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
            <!--</el-upload>-->
            <!--</el-form-item>-->
            <!--</el-col>-->
            <el-col :span="12">
              <el-form-item label="" prop="coverImage">
                <p class="pd0">商品封面图<span>(建议尺寸336*252px)</span></p>
                <el-upload
                  class="avatar-uploader"
                  :action="url"
                  :show-file-list="false"
                  :on-success="
                    (res, file, fileList) =>
                      successHandle(res, 'pic')
                  "
                  :before-upload="
                  (file) => beforeUploadHandle(file, 'pic')
                "
                >
                  <img v-if="dataForm.pic" :src="dataForm.pic" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="" prop="coverImage">
                <p class="pd0">商品详情长图<span>(建议宽度750px)</span></p>
                <el-upload
                  class="avatar-uploader"
                  :action="url"
                  :show-file-list="false"
                  :on-success="
                    (res, file, fileList) =>
                      successHandle(res, 'describeLongImage')
                  "
                  :before-upload="
                  (file) => beforeUploadHandle(file, 'describeLongImage')
                "
                >
                  <img
                    v-if="dataForm.describeLongImage"
                    :src="dataForm.describeLongImage"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="" prop="">
                <p class="pd0">
                  商品详情图<span>(建议尺寸750*480px，最多5张)</span>
                </p>
                <el-upload
                  :preview-src-list="dataForm.carouselPicList"
                  :action="url"
                  :file-list="fileListtwo"
                  :limit="5"
                  :before-upload="
                  (file) => beforeUploadHandle(file, 'carouselPicList')
                "
                  list-type="picture-card"
                  :on-success="successHandletwo"
                  :on-remove="handleRemovetwo"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品详情(1)" prop="describeOne">
                <el-input
                  v-model="dataForm.describeOne"
                  placeholder="商品详情(1)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品详情(2)" prop="describeTwo">
                <el-input
                  v-model="dataForm.describeTwo"
                  placeholder="商品详情(2)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品详情(3)" prop="describeThree">
                <el-input
                  v-model="dataForm.describeThree"
                  placeholder="商品详情(3)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品详情(4)" prop="describeFour">
                <el-input
                  v-model="dataForm.describeFour"
                  placeholder="商品详情(4)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品详情(5)" prop="describeFive">
                <el-input
                  v-model="dataForm.describeFive"
                  placeholder="商品详情(5)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品详情(6)" prop="describeSix">
                <el-input
                  v-model="dataForm.describeSix"
                  placeholder="商品详情(6)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--地图-->
      <template slot="footer" v-if="!disabled">
        <el-button @click="resetForm">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()"
          >{{ $t("confirm") }}
        </el-button>
      </template>
    </el-dialog>
    <el-dialog
      width="80%"
      :visible.sync="mapShow"
      title="地图选点"
      top="70px"
      :showClose="false"
    >
      <mapdiv
        ref="mapDiv"
        style="width: 96%; margin: 0 auto 20px"
        :longitude="dataForm.longitude"
        :latitude="dataForm.latitude"
        @getPos="getPosVal($event)"
      >
      </mapdiv>
    </el-dialog>
    <!-- 裁剪框 -->
    <cropper-dlg
      v-if="showCropper"
      :dialogVisible.sync="showCropper"
      :img-file="currentFile"
      ref="vueCropper"
      @upload="cropperUpload"
    ></cropper-dlg>
  </div>
</template>

<script>
import mapdiv from "./map2";
import Cookies from "js-cookie";

export default {
  components: {
    mapdiv,
  },
  data() {
    return {
      currentFile: "",
      cropperIndex: null,
      showCropper: false, //裁剪弹框
      isCropper: true, //上传之前是否显示裁剪
      inputVisible: false,
      inputValue: "",
      inputVisible1: false,
      inputValue1: "",
      mapShow: false,
      dialogImageUrl: "",
      dialogVisible: false,
      dialogImageUrltwo: "",
      dialogVisibletwo: false,
      url: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
      fileList: [],
      fileListtwo: [],
      options: [
        {
          dictValue: 0,
          dictLabel: "人",
        },
        {
          dictValue: 1,
          dictLabel: "艘",
        },
      ],
      dataRule: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 25,
            message: "长度在 2 到 25 个字符",
            trigger: "blur",
          },
        ],
        latitude: [
          {
            required: true,
            message: "请输入纬度",
            trigger: "blur",
          },
        ],
        longitude: [
          {
            required: true,
            message: "请输入经度",
            trigger: "blur",
          },
        ],
        venuesType: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
      },
      visible: false,
      dataForm: {
        id: "",
        waresThali: "",
        price: "",
        businessHours: "",
        labelList: [],
        studioName: "",
        phone: "",
        address: "",
        carouselPicList: [],
        describeLongImage: "",
        pic: "",
        describeOne: "",
        describeTwo: "",
        describeThree: "",
        describeFour: "",
        describeFive: "",
        describeSix: "",
      },
      tempPhone:''
    };
  },
  computed: {},
  mounted() {
    //DOM初始化完成进行地图初始化
  },
  beforeDestroy() {
    if (!this.map) {
      return;
    }
    this.map.destroy();
    this.map = null;
  },
  methods: {
    handleClose(tag) {
      this.dataForm.labelList.splice(this.dataForm.labelList.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dataForm.labelList.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    handleClose1(tag) {
      this.dataForm.dayReservationTimeList.splice(
        this.dataForm.dayReservationTimeList.indexOf(tag),
        1
      );
    },
    showInput1() {
      this.inputVisible1 = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput1.$refs.input.focus();
      });
    },
    handleInputConfirm1() {
      let inputValue1 = this.inputValue1;
      if (inputValue1) {
        this.dataForm.dayReservationTimeList.push(inputValue1);
      }
      this.inputVisible1 = false;
      this.inputValue1 = "";
    },

    mapCli() {
      this.mapShow = true;
      this.$nextTick(() => {
        this.$refs.mapDiv.initMap();
      });
    },
    getPosVal(obj) {
      console.log("111111111111111111", obj);
      this.mapShow = false;
      this.dataForm.latitude = obj.lat;
      this.dataForm.longitude = obj.lon;
      this.dataForm.lonandLat = obj.lon + "," + obj.lat;
    },
    // 上传之前
    beforeUploadHandle(file,name) {
      if (
        file.type !== "image/jpg" &&
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        this.$message.error(
          this.$t("upload.tip", {
            format: "jpg、png、gif",
          })
        );
        return false;
      }
      if (this.isCropper) {
        //显示裁剪
        this.currentFile = file;
        this.cropperIndex = name;
        this.showCropper = true;
        this.$nextTick(() => {
          this.$refs.vueCropper.init();
        });
        return false;
      }
    },

    cropperUpload(data) {
      this.showCropper = false;
      if (data != "close") {
        //裁剪成功后获取的图片
        this.$http.post("/oss/file/aliyunUpload", data).then((res) => {
          if (res.data.code == 0) {
            if (this.cropperIndex == "carouselPicList") {
              //门头照
              this.successHandletwo(res.data);
            } else {
              //其他照片
              this.successHandle(res.data,this.cropperIndex);
            }
          }
        });
      }
    },
    successHandle(res,  name) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.dataForm[name] = res.data.url;
    },
    handleRemovetwo(file, fileList) {
      if (fileList.length == 0) {
        this.dataForm.carouselPicList = [];
      } else {
        this.fileListtwo = fileList.map((item) => {
          return item;
        });
      }
    },
    // 上传成功
    successHandletwo(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.fileListtwo.push({
        name: "",
        url: res.data.url,
      });
    },
    close() {
      this.dataForm = {
        id: "",
        waresThali: "",
        price: "",
        businessHours: "",
        labelList: [],
        studioName: "",
        phone: "",
        address: "",
        pic: "",
        carouselPicList: [],
        describeLongImage: "",
        describeOne: "",
        describeTwo: "",
        describeThree: "",
        describeFour: "",
        describeFive: "",
        describeSix: "",
      };
      this.$emit("changeDisabled");
    },
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.fileList = [];
      this.$http
        .get("/travel/tourShoot/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.tempPhone = this.dataForm.phone;
          this.dataForm.lonandLat =
            this.dataForm.longitude + "," + this.dataForm.latitude;
          if (this.dataForm.appearancePic) {
            this.fileList = [
              {
                name: "",
                url: this.dataForm.appearancePic,
              },
            ];
          } else {
            this.fileList = [];
          }

          if (this.dataForm.carouselPicList) {
            let lsdata = this.dataForm.carouselPicList;
            this.fileListtwo = lsdata.map((item, index, arr) => {
              let json = {};
              json.name = "";
              json.url = item;
              return json;
            });
          } else {
            this.fileListtwo = [];
          }
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle(formName) {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.dataForm.carouselPicList = this.fileListtwo.map((item) => {
            return item.url;
          });
          //加密
          let newDataForm = Object.assign({}, this.dataForm);
          if (newDataForm.phone && this.tempPhone != newDataForm.phone) {
            //编辑了
            newDataForm.phone = this.$CryptoJS.encrypt(newDataForm.phone);
          } else {
            newDataForm.phone = null;
          }
          this.$http[!this.dataForm.id ? "post" : "put"](
            "/travel/tourShoot",
            newDataForm
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.fileList = [];
              this.fileListtwo = [];
              this.dataForm = {
                id: "",
                waresThali: "",
                price: "",
                businessHours: "",
                labelList: [],
                studioName: "",
                phone: "",
                address: "",
                pic: "",
                carouselPicList: [],
                describeLongImage: "",
                describeOne: "",
                describeTwo: "",
                describeThree: "",
                describeFour: "",
                describeFive: "",
                describeSix: "",
              };
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch(() => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.fileList = [];
      this.fileListtwo = [];
      this.dataForm = {
        id: "",
        waresThali: "",
        price: "",
        businessHours: "",
        labelList: [],
        studioName: "",
        phone: "",
        pic: "",
        address: "",
        carouselPicList: [],
        describeLongImage: "",
        describeOne: "",
        describeTwo: "",
        describeThree: "",
        describeFour: "",
        describeFive: "",
        describeSix: "",
      };
      this.$refs.dataForm.resetFields();
      this.visible = false;
    },
  },
  props: {
    disabled: Boolean,
  },
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 400px;
  position: relative;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.Addresssearch {
  position: absolute;
  top: 10px;
  left: 20px;
  height: 50px;
  width: 900px;
  z-index: 88;
  background: #fff;
  padding: 5px 0 0 10px;
}
</style>
